第 2 步 - 使用 JavaScript 脚本控制应用程序状态

在本步骤的第一节中，您将学习创建另一个状态机，以设置当用户打开/关闭应用程序时哪些指示灯可见。在本步骤的第二节中，您将学习添加 JavaScript 脚本来定义何时打开/关闭应用程序。

创建状态机以打开/关闭空调应用程序

在本节中，您将学习创建状态机，控制当打开/关闭应用程序时哪些指示灯可见。图像用于显示空调档位指示灯在空调关闭时变为灰色，当空调打开时，第一个档位指示条显示为绿色。

要创建状态机以打开/关闭应用程序：

在素材库 (Library) > 状态机 (State Managers) 中创建状态机，并将其命名为 OnOff Switch。
在 OnOff Switch 中将该状态组重命名为 AC OnOff，将两个状态重命名为 On 和 Off。
在素材库 (Library) > 状态机 (State Managers) > OnOff Switch 中选择 AC OnOff 状态组，并在属性 (Properties) 中将初始状态 (Initial State) 设置为 OnOff Switch/AC OnOff/Off。
在 On 和 Off 状态中，为应用程序打开/关闭时显示的图像创建状态对象 (State Object)。
例如，命名状态对象 Image。
选择 Image 状态对象并在属性 (Properties) 中添加和设置：
- 目标对象路径 (Target Object Path) 为 ./Level buttons
- 图像 (Image) 为：
  - On 状态为 Levels on
  - Off 状态为 Levels off
- 可测试命中 (Hit Testable) 为禁用
Levels on 图像包含档位指示条，其中第一条可见，并且Levels off 图像在应用程序关闭时将档位指示条显示为灰色。您设置状态机以显示当应用程序处于 On 和 Off 状态时的正确图像。
在 On 状态为每个档位创建状态对象 (State Object)，将其命名为 Level 1、Level 2、Level 3 和 Level 4，并在属性 (Properties) 中：
- 为 Level 1 状态对象 (State Object) 将目标对象路径 (Target Object Path) 设置为Level buttons/Level 1，为Level 2 状态对象 (State Object) 设置为Level buttons/Level 2，以此类推。
- 为每个状态对象 (State Object) 添加可测试命中 (Hit Testable) 属性，并确保已启用。
  启用档位指示灯的可测试命中 (Hit Testable) 属性，以在应用程序打开时启用档位按钮的用户输入，并在应用程序关闭时禁用命中可测试性。
在素材库 (Library) 中选择 Level 1、Level 2、Level 3 和 Level 4 状态对象，将其复制粘贴到 Off 状态，并在属性 (Properties) 中禁用可测试命中 (Hit Testable) 属性。
在工程 (Project) 中选择 AirCondition level 节点，在属性 (Properties) 中添加状态机 (State Manager) 属性，将其设为 OnOff Switch。
为 AirCondition level 节点设置 OnOff Switch 状态机，以控制档位按钮。

在预览 (Preview) 中点击指示灯按钮可将其打开。在下一节中，添加 JavaScript 脚本，并设置当所有指示灯按钮关闭时应用程序处于Off 状态。
在交互 (Interact) 模式中，您可以像在设备上一样在预览 (Preview) 窗口中与应用程序交互。您使用预览 (Preview) 工具时，在预览 (Preview) 窗口中点击，可切换到交互 (Interact) 模式。

使用 JavaScript 脚本控制状态机

在本节中，您将学习在应用程序中添加 JavaScript 脚本，以控制应用程序状态。设置应用程序，当 Legs、Body 和 Shield 切换按钮的值更改时执行该脚本。

在工程 (Project) 中选择RootPage 节点，在触发器 (Triggers) 部分的节点组件 (Node Components) 中右键点击并选择添加触发器 (Add Trigger) > 常规 (General) > 属性变更时 (On Property Change)。
Kanzi 会在设定的属性值发生更改时执行属性变更时 (On Property Change) 触发器。
在属性变更时 (On Property Change) 触发器中点击添加 (Add) 下拉菜单并选择执行脚本 (Execute Script) 动作。
当属性变更时 (On Property Change) 触发器设置为关闭，Kanzi 执行在脚本编辑器 (Script Editor) 中选择的脚本。
在执行脚本 (Execute Script) 窗口中选择 + 创建脚本 (+ Create Script) 以创建脚本。

在脚本编辑器 (Script Editor) 中，写入要使用的脚本，以控制当打开/关闭应用程序时哪些指示灯可见。请参阅脚本参考。
例如，使用此脚本：

//获取Body、Legs 和 Shield 切换按钮的切换状态。

var shield = node.lookupNode('./Shield');
var shieldState = shield.getProperty('ButtonConcept.ToggleState');

var legs = node.lookupNode('./Legs');
var legsState = legs.getProperty('ButtonConcept.ToggleState');

var body = node.lookupNode('./Body');
var bodyState = body.getProperty('ButtonConcept.ToggleState');

var stack = node.lookupNode('./AirCondition level');

var levelButtons = node.lookupNode('./AirCondition level/Level buttons');

//当Body、Legs 或 Shield 切换按钮状态为 1 时，
//将 AC OnOff 状态设置为On。如果没有按钮状态为 1，将状态设置为Off，
//档位按钮状态设置为Level 1。

if (shieldState != 0 || legsState != 0 || bodyState != 0)
{
    stack.goToState('AC OnOff.On');
}
else
{
    stack.goToState('AC OnOff.Off');
    levelButtons.goToState('Level.1')    
}

在工程 (Project) 中选择RootPage 节点，在属性变更时 (On Property Change) 触发器的节点组件 (Node Components) 中点击触发器设置 (Trigger Settings)，并在触发器设置编辑器 (Trigger Settings Editor) 中设置：
- 节点 (Node) 为屏幕 (Screens)/屏幕 (Screen)/RootPage/Body
- 属性类型 (Property Type) 为ButtonConcept.ToggleState (Toggle State)
  Kanzi 会在用户点击按钮时执行在上一步骤中创建的脚本，并更改切换状态 (Toggle State) 属性的值。
为属性变更时 (On Property Change) 另外增加两个触发器，从第一个属性变更时 (On Property Change) 触发器中复制执行脚本 (Execute Script) 动作并将其粘贴到每个新的触发器，并在这些触发器的触发器设置编辑器 (Trigger Settings Editor) 中设置：
- 节点 (Node) 为屏幕 (Screens)/屏幕 (Screen)/RootPage/Legs 和屏幕 (Screens)/屏幕 (Screen)/RootPage/Shield
- 属性类型 (Property Type) 为ButtonConcept.ToggleState (Toggle State)
为每个 Body、Legs 和 Shield 按钮创建触发器。当用户点击其中一个按钮，Kanzi 执行脚本，应用程序检查每个指示灯按钮的状态。点击其中一个按钮可触发应用程序转到 On 状态。当所有按钮关闭，应用程序还将关闭档位指示灯。

在预览 (Preview) 中，当您点击任何要打开空调的区域，应用程序打开。一旦应用程序打开，就可以更改档位并打开和关闭其他区域。要关闭空调，关闭Body、Shield 和 Legs 指示灯按钮。

< 上一步

接下来该做什么？

在本教程中，您学习了如何使用状态机控制您的 Kanzi 应用程序。您还学习了如何使用 JavaScript 脚本控制状态机。现在您可以：

详细了解有关在 Kanzi 应用程序中使用 JavaScript 脚本的信息。请参阅教程：使用 JavaScript 创建演示模式。
详细了解有关使用状态机和创建状态间迁移的信息。请参阅使用状态机和使用状态迁移。

另请参阅